<template>
  <!-- 新增视频 -->
  <el-dialog
    :visible.sync="addVideoModal"
    width="800px"
    :modal-append-to-body="false"
  >
    <div slot="title" class="flex">
      <div class="dialog-title">上传素材</div>
      <div class="dialog-sub rel" style="top: 8px">
        支持的视频素材：mov/mp4/3gp（文件≤1G、时长≤60分钟、分辨率480p~4k）
      </div>
    </div>
    <div class="dialog-text">
      正在上传{{ uploading }}/{{ fileList.length }}个视频,进度：{{ progress }}
    </div>
    <div class="dialog-video-list flex flex-wrap">
      <!--   accept="video/*" -->
      <upload
        ref="upload"
        :auto="false"
        :param="form"
        action="/cloudcut-api/products/products-batch-upload"
        :limit="99"
        accept="video/*"
        @getFile="getFile"
        @getProgress="calProgress"
        @getUrl="getUrl"
      >
        <div class="uplod-box flex-c flex-v align-center pointer">
          <img src="@/assets/images/upload.png" alt="" class="upload">
          上传素材
        </div>
      </upload>

      <div
        v-for="(item, index) in urlList"
        :key="index"
        class="video-item rel flex-c flex-v align-center"
      >
        <div class="abs whole flex-c align-center img-layer">
          <i class="el-icon-delete-solid pointer" @click="del(index)" />
        </div>
        <video :src="item" class="img" :controls="false" />
      </div>
    </div>
    <div class="batch-todo" style="margin-top: 20px">
      <div class="name" style="margin-bottom: 10px; color: #000">
        素材批量处理：
      </div>
      <div class="mt">
        <div class="mix-input flex align-center">
          <div class="prefix">修剪开头：</div>
          <el-input
            v-model="form.start"
            style="width: 200px"
            placeholder="输入1~3600秒"
            type="number"
            oninput="if(value>3600)value=3600;if(value.length>4)value=value.slice(0,4);if(value<1)value=1"
          />
          <div class="suffix">
            <div class="todo-box flex-c align-center">
              <div class="btn flex-c align-center" @click="minus('start')">
                -
              </div>
              <div class="btn flex-c align-center" @click="add('start')">
                +
              </div>
            </div>
          </div>

        </div>
      </div>
      <div class="mt">
        <div class="mix-input flex align-center">
          <div class="prefix">修剪片尾：</div>
          <el-input
            v-model="form.end"
            style="width: 200px"
            placeholder="输入1~3600秒"
            type="number"
            min="1"
            max="3600"
            oninput="if(value>3600)value=3600;if(value.length>4)value=value.slice(0,4);if(value<1)value=1"
          />
          <div class="suffix">
            <div class="todo-box flex-c align-center">
              <div class="btn flex-c align-center" @click="minus('end')">
                -
              </div>
              <div class="btn flex-c align-center" @click="add('end')">
                +
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="addVideoModal = false">取 消</el-button>
      <el-button type="primary" @click="submit">确 定</el-button>
    </span>
  </el-dialog>
</template>
<script>
import Upload from '@/components/Upload/Index.vue'
export default {
  components: { Upload },
  props: {
    categoryId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      addVideoModal: false,
      fileList: [],
      urlList: [],
      form: {
        productCategoryId: '',
        start: null,
        end: null,
        files: []
      },
      progress: '-',
      uploading: 0
    }
  },
  computed: {
    oss() {
      return this.$oss
    }
  },
  watch: {
    clearFile() {
      this.fileList = []
      this.urlList = []
      this.form.files = []
      this.uploading = 0
      this.progress = '-'
      this.$nextTick(() => {
        if (this.$refs.upload) {
          this.$refs.upload.clearFiles()
        }
      })
    },

    categoryId(val) {
      this.form.productCategoryId = val
    },
    progress() {
      if (this.progress === '100%') {
        this.$message.success('上传成功')
        this.addVideoModal = false
        this.$emit('refresh')
      }
    }
  },
  created() {
    this.form.productCategoryId = this.categoryId || ''
  },
  methods: {
    calProgress(value) {
      const totalProgress = 100 * this.fileList.length
      if (value === 100) {
        this.uploading += 1
      }
      this.progress = (100 * this.uploading + value * 100) / totalProgress + '%'
      if (this.uploading === this.fileList.length) {
        this.$message.success('上传成功')
        this.addVideoModal = false
        this.$emit('refresh')
      }
    },
    getFile(file) {
      this.fileList.push(file)
      this.form.files = this.fileList
    },
    getUrl(url = '') {
      this.urlList.push(url)
    },
    minus(name) {
      if (this.form[name] > 1) {
        this.form[name] = Number(this.form[name]) - 1
      }
    },
    add(name) {
      if (this.form[name] < 3600) {
        this.form[name] = Number(this.form[name]) + 1
      }
    },
    open() {
      this.addVideoModal = true
      this.clearFile()
    },
    async submit() {
      await this.$refs.upload.submit()
      this.$emit('get', this.fileList)
    },
    // handleChange(file) {
    //   // this.fileList.push({
    //   //   url: URL.createObjectURL(file.raw),
    //   //   name: file.name,
    //   //   time: ''
    //   // })
    // },
    del(index) {
      this.fileList.splice(index, 1)
      this.urlList.splice(index, 1)
    }
  }
}
</script>
<style lang="scss" scoped>
.mt {
  margin-bottom: 20px;
}
.todo-box {
  .btn {
    font-size: 20px;
    color: #000;
    cursor: pointer;
    width: 45px;
    &:first-child{
      font-size: 20px;
      position: relative;
      &::after{
        position: absolute;
        right: 0;
        width: 1px;
        height: 80%;
        top: 10%;
        background-color: rgba(0, 0, 0, 0.13);
        content: "";
      }
    }
  }
}
.dialog-title {
  font-size: 20px;
  font-weight: 400;
  color: rgba(0, 0, 0, 1);
}
.dialog-sub {
  font-size: 14px;
  font-weight: 400;
  color: rgba(166, 166, 166, 1);
  margin-left: 12px;
}
.dialog-text {
  font-size: 14px;
  font-weight: 400;
  color: rgba(0, 0, 0, 1);
}
.dialog-video-list {
  margin-top: 20px;
  .video-item {
    margin-right: 12px;
    margin-bottom: 12px;
    .img-layer {
      display: none;
    }
    &:hover {
      .img-layer {
        display: flex;
      }
    }
    .img {
      width: 90px;
      height: 90px;
      border-radius: 15px;
    }
  }
}
.uplod-box {
  width: 90px;
  height: 90px;
  border-radius: 15px;
  border: 0.5px dashed rgba(128, 128, 128, 1);
  margin-right: 12px;
  margin-bottom: 12px;
  font-size: 14px;
  font-weight: 400;
  color: rgba(128, 128, 128, 1);
  .upload {
    width: 28px;
    margin-bottom: 6px;
  }
}

.mb {
  margin-bottom: 15px;
}
</style>
